<!-- search2 -->
<template>
  <div class="content">
     <div class="search-nav">
        <img @click="tiao" src="../../assets/Fill 1.png" alt="" >
         <input type="text" value="" >
         <img src="../../assets/更多.png" alt="">
     </div>
     <div class="search-tab">
        <div class="tab-list">
            <ul>
               <li>默认</li>
               <li>销量</li>
               <li>价格</li>
               <li>筛选</li>
            </ul>            
        </div>
        <div class="bottom">
           <ul>
            <li v-for="(item,i) in list" :key="i">
                <img v-bind="{src: item.mainPic ? item.mainPic : require('../../assets/Bitmap.png') }" alt="">
                <div>
                    <p class="title">{{item.goodsName}}</p>
                    <div>
                        <div class="price"><p> <span>￥</span> 24.00</p><span>1瓶起批</span></div>
                        <p>酒便利酒水有限公司</p>
                    </div>
                    <img src="../../assets/to_shop.png" alt="">
                </div>
            </li>
        </ul>
        </div>
     </div>
  </div>
</template>

<script>
export default {
   name:'search2',
  data () {
    return {
       list:[
          {
             mainPic:false,
          goodsName:'农夫山泉 饮用天然水塑膜量贩装这个名称有可能会很长很长很长恒昌',
          
          },
          
          
          
       ]
    };
  },

//   components: {},

//   computed: {},

  methods: {
     tiao(){
            this.$router.back({
                path:'/search'
            })
        },
  },

//   method() {}
}

</script>
<style lang='scss' scoped>
.search-nav{
   display: flex;
   flex-flow:row nowrap;
   align-items: center;
   justify-content: space-between;
   padding: 0.08rem 0.16rem;
   
   img{
                    height: 0.15rem;
                    width: 0.08rem;
                }
                
                input{
                    height: 0.33rem;
                    width: 2.77rem;
                    background: #FFFFFF;
                    border: 0.01rem solid #ccc;
                    border-radius: 0.05rem;
                    padding-left:0.4rem; 
                    box-sizing: border-box;
                    background-image: url('../../assets/sousuo.png');
                    background-repeat: no-repeat;
                    background-size: 0.14rem;
                    background-position: 0.1rem;
                    outline: none;
                    font-size: 0.14rem;
                }            
}
.search-tab{
   .tab-list{
      ul{
         display: flex;
         flex-flow: row nowrap;
         justify-content: space-around;
         align-items: center;
         li{
            font-size: 0.14rem;
            
         }
      }
   }
   .bottom{
      ul{
        overflow: hidden;
        background-color: #fff;
        li{
            padding: .13rem .14rem .26rem;
            display: flex;
            justify-content: space-between;
            >img{
                width: 1rem;
                height: 1rem;
            }
            >div{
                width: 2.35rem;
                height: 1rem;
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .title{
                    font-size: .14rem;
                    text-align: left;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
                >div{
                    .price{
                        width: 1rem;
                        font-size: .1rem;
                        color: #ccc;
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-end;
                        >P{
                            font-size: .14rem;
                            color: #d33;
                            >span{
                                font-size: .1rem;
                            }
                        }
                    }
                    >p{
                        font-size: .1rem;
                        color: #ccc;
                        text-align: left;
                        margin-top: .05rem;
                    }
                }
                >img{
                    width: .16rem;
                    height: .16rem;
                    position: absolute;
                    right: .1rem;
                    bottom: .1rem;
                }
            }
        }
    }
   }
}
</style>